
<template>
  <div id="detailWrap">
    <div class="head"><router-link :to="{name:'userManager',params:{isV:isV}}">返回上一页</router-link></div>
    <div class="container">
        <div><span>用户       </span><span>{{userDetail.uid}}</span></div>
        <div><span>昵称       </span><span>{{userDetail.nick_name}}</span></div>
        <div><span>头像       </span><span><img :src="userDetail.head_image"/></span></div>
        <hr>
       <div><span>关注人       </span><span></span></div>
       <div><span>总体花费       </span><span>元</span></div>
      <div><span>总体收入       </span><span>元</span></div>
      <hr>
      <div v-if="isV">
        <el-select  v-for="info in tags" v-model="info.name" :key="info.tag_id">
          <el-option
            v-for="item in tagOpitions"
            :key="item.tag_id"
            :label="item.name"
            :value="item.tag_id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="footerBtn">
      <button v-if="!userDetail.user_status" @click="showFreezeDialog = true">冻结</button>
      <button v-if="isV" >确认修改</button>
      <button><router-link :to="{name:'userManager',params:{isV:isV}}">取消</router-link></button>
    </div>
    <freezeReason v-if="showFreezeDialog" :showDialog="showFreezeDialog" :currentUid="userDetail.uid" @closeDialog="onDialogClosed"></freezeReason>
  </div>
</template>

<script>
  import freezeReason from './frezzePage.vue'
  import userService from './UserService.js'
  export default {
    data () {
      return {
        userDetail: {},
        showFreezeDialog: false,
        options: [],
        defaultOption: '',
        isV: 0,
        tags: [],
        tagOpitions: []
      }
    },
    methods: {
      // 切换状态展示 0代表正常 1代表冻结
      onDialogClosed (status) {
        this.showFreezeDialog = status
        if (status) {
          this.getUserInfoById(this.userDetail.uid)
        }
      },
      // 获取当前用户信息，冻结按钮需根据用户是否冻结显示隐藏
      getUserInfoById (uid) {
        var _this = this
        userService.getUserInfoById(uid).then(response => {
          console.log(response)
          if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
            _this.userDetail = response.data.data
            console.log(JSON.stringify(_this.userDetail))
            _this.tags = _this.userDetail.vuser_good_tags
            console.log(_this.tags)
          } else {
            alert(response.data.msg)
          }
        }, response => {
          console.log(response)
          alert(response)
        })
      }
    },
    components: {freezeReason},
    created: function () {
      var uid = this.$route.params['id']
      this.isV = this.$route.params['isV']
      this.getUserInfoById(uid)
      // 获取大V用户的good下拉框选项
      var _this = this
      userService.getVuserGoodTags().then(response => {
        console.log(response)
        if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
          _this.tagOpitions = response.data.data
          console.log(_this.tagOpitions)
        } else {
          alert(response.data.msg)
        }
      }, response => {
        console.log(response)
        alert(response)
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .container{
   border: 1px solid #fff;
 }
</style>
